<!--开关按钮组件，'0'关闭，'1'开启-->
<template>
  <a-form-item :label="label">
    <div :style="getStyle">
      <a-switch
          v-decorator="cvDecorator"
          :disabled="isDisabled"
          :loading="ccloading"
          @click="click"
          @change="change"
      ></a-switch>
    </div>
  </a-form-item>
</template>

<script>
import { mixin } from './js/form.js'

export default {
  name: 'AntFormSwitch',
  mixins: [mixin],
  props: {
    /**
     * 是否禁用
     */
    disabled: {
      type: Boolean,
      default: false
    },
    /**
     * 是否由form表单自动布局
     */
    autoLayoutByForm: {
      type: Boolean,
      default: true
    },
    /**
     * 显示文本
     */
    label: {
      type: String,
      default: ''
    },
    /**
     * 是否显示加载中
     */
    cloading: {
      type: Boolean,
      default: false
    },
    /**
     * 绑定字段 ['phone' ,{ rules: [{ required: true},{validator:function(rule, value, callback)] }],自定义验证方法时callback回调函数必须在方法中调用，
     * 失败返回错误提示callback("xxx")，成功返回callback()
     */
    vDecorator: {
      type: Array,
      default: () => []
    },
    /**
     * css样式，优先级最高
     */
    cstyle: {
      type: String,
      default: ''
    },
    /**
     * 非自动布局的宽度，优先级最低
     */
    defaultWidth: {
      type: Number,
      default: 240
    }
  },
  data() {
    return {
      //是否禁用和输入提示，由AntForm组件调用
      cdisabled: false,
      cplaceholder: '请输入' + this.label,
      ccloading: this.cloading,
      cvDecorator: this.addValuePropName()
    }
  },
  computed: {
    /**
     * 获取样式
     */
    getStyle() {
      return { width: (this.percentageLayoutWidth ? this.percentageLayoutWidth : this.defaultWidth) + 'px', ...this.cstyle }
    }
  },
  created() {
  },
  mounted() {
  },
  watch: {},
  methods: {
    /**
     * 选择值发生改变世界
     * @param checked
     * @param event
     */
    change(checked, event) {
      this.$emit('change', checked, event)
    },
    /**
     * 点击事件
     * @param checked
     * @param event
     */
    click(checked, event) {
      this.$emit('change', checked, event)
    },
    /**
     *  switch 控件要求vDecorator 带有valuePropName: 'checked'
     * @returns {*[]}
     */
    addValuePropName() {
      let vDecorator = this.vDecorator
      if (vDecorator.length == 1) {
        vDecorator.push({ valuePropName: 'checked' })
      }
      if (vDecorator.length > 1) {
        if (!vDecorator[1].valuePropName) {
          vDecorator[1].valuePropName = 'checked'
        }
      }
      return vDecorator
    },
    /**
     * 赋值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的可用于赋值的对象
     */
    beforeSetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      if (val && val != '0') {
        val = true
      } else {
        val = false
      }
      record[key] = val
      return record
    },
    /**
     * 取值之前的转换操作,由AntForm组件自动调用
     * 参数：recordPara，转换之前的record
     * 返回值：转换之后的对象
     */
    beforeGetValue(recordPara) {
      let record = {}
      let key = this.vDecorator[0]
      let val = recordPara[key]
      val = val ? '1' : '0'
      record[key] = val
      return record
    }
  }
}
</script>

<style lang="less" scoped>
</style>
